<template>
  <div class="app-container Blog">
    <hz-search title="文章管理" :actionData="searchActionData" @search="getSelectionChange(5)" @reset="handleReset">
      <el-form size="mini" label-width="90px" label-position="left" :model="searchParams" v-bind="$attrs" v-on="$listeners" ref="searchForm"  >
      <el-row :gutter="30">
        <el-col  :span="9">
            <el-form-item label="文章名称">
            <el-input v-model="searchParams.title" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="文章分类">
            <hz-select
              clearable
              placeholder="请选择文章分类"
              :value.sync="searchParams.essayType"
              :options='classifyOptions'
            ></hz-select>
          </el-form-item>
        </el-col>
        <el-col  :span="9">
            <el-form-item label="文章标签">
            <hz-select
              clearable
              optionValue="_id"
              placeholder="请选择文章标签"
              :value.sync="searchParams.essayTag"
              :options='tagOptions'
            ></hz-select>
          </el-form-item>
        </el-col>
        <el-col  :span="9">
            <el-form-item label="文章状态">
              <hz-select
              clearable
              placeholder="请选择文章状态"
              :value.sync="searchParams.essayState"
              :options="[ {label:'已发布',value:1}, {label:'草稿',value:2}]"
            ></hz-select>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>
    </hz-search>
    <!-- 表格数据 -->
    <hz-table
        :label-data="tableData.cloumn"
        :table-data="tableData.data"
        :counts="count"
        pagi
        :load="loading"
        @selection-change="getSelectionChange"
        :current-page="this.searchParams.page"
        @pageChange="getCurrentPage"
      >

        <el-table-column label="文章分类" width="80 ">
          <template slot-scope="scope">
            {{getBgStatus(scope.row.essayType,classifyOptions) }}
          </template>
        </el-table-column>
        <el-table-column label="文章标签" width="150">
          <template slot-scope="scope">
            <el-dropdown>
              <span class="el-dropdown-link">
                查看标签<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item,index) in scope.row.essayTagName" :key="index">{{item}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180" >
          <template slot-scope="scope">
            {{time(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column label="文章封面" >
          <template slot-scope="scope">
            <img :src="scope.row.coverImg" style="height:2rem" alt="">
          </template>
        </el-table-column>
        <el-table-column label="文章状态" >
          <template slot-scope="scope">
            {{scope.row.essayState === 2 ? '草稿':'已发布'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <span class="tb-view" @click="viewRow(scope.row)">预览</span>
            <span class="tb-edit" @click="updateRow(scope.row)" >编辑</span>
            <span class="tb-delete" @click="deleteRow(scope.row)">移除</span>
          </template>
        </el-table-column>
    </hz-table>
    <!-- 预览markdown文章 -->
  </div>
</template>

<script>
import { time } from '@/utils/tool'
import { getBgStatus } from '../../../utils/validate'
import { getClassifyList, getEsssayList, postDeleteEssay,getTagList } from '@/api/modules/blog'
import HzSearch from '../../../components/compon/HzSearch.vue'
import HzSelect from '../../../components/compon/HzSelect.vue'
import HzTable from '../../../components/compon/HzTable.vue'
export default {
  components: { HzSearch, HzSelect, HzTable },
  name: 'Blog',
  data () {
    return {
      classifyOptions: [], // 文章类型
      tagOptions:[],
      searchParams: {
        essayType: '',
        essayTag: '',
        page: 1,
        rows: 5
      },
      loading: false,
      count: 0,
      tableData: {
        cloumn: [
          { label: '文章标题', prop: 'title' },
          { label: '浏览数量', prop: 'pageView' },
        ],
        data: []
      },
      searchActionData: [
        { tip: '添加文章', icon: 'el-icon-circle-plus-outline', handleClick: this.handleAdd, auth: () => { return true } }
      ]
    }
  },
  computed: {
    time () {
      return time
    },
    getBgStatus () {
      return getBgStatus
    }
  },
  created () {
    this.getClassify()
    this.fetch()
  },
  methods: {
    // 搜索、筛选
    async fetch () {
      // 文章列表
      const res = await getEsssayList(this.searchParams)
      this.count = res.total
      this.tableData.data = res.rows

    },
    //  获取文章类型数据
    async getClassify () {
      const res = await getClassifyList()
      this.classifyOptions = res.rows
      // 标签列表
      const data =  await getTagList()
      this.tagOptions = data.rows
    },
    // 重置搜索栏
    handleReset () {
      this.searchParams.essayType = ''
      this.getSelectionChange(5)
    },
    // 新增Blog
    handleAdd () {
      this.$router.push({ name: 'EssayAdd' })
    },
    // 预览文章
    async viewRow (row) {
      this.$router.push({ name: 'EssayPreview', params: { id: row._id } })
      // 这里的newDate[0].content就是取出来的md格式的文本内容
      // this.readmeContent = marked(newData[0].content || '', {
      //   sanitize: true
      // })
    },
    // 编辑文章
    async updateRow (row) {
      this.$router.push({ name: 'EssayUpdate', params: { id: row._id, essayState: row.essayState } })
    },
    // 删除文章
    deleteRow (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await postDeleteEssay({ id: row._id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.fetch()
      })
    },
    // 下拉框选择每页显示条数
    getSelectionChange (val) {
      this.searchParams.rows = val
      this.searchParams.page = 1
      this.fetch()
    },
    // 切换分页
    getCurrentPage (val) {
      this.searchParams.page = val
      this.fetch()
    }
  }
}
</script>

<style  lang="scss" scoped>
.el-dropdown-link{
    cursor: pointer;
    color: #409EFF;
}
</style>
